<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/city.js" type="text/javascript"></script>
		<script type="text/javascript">
			//console.log($citys);
			onload = function(){
				var form_c1 = document.getElementById('city').city1;
				var form_c2 = document.getElementById('city').city2;
				var form_c3 = document.getElementById('city').city3;
				var form_c4 = document.getElementById('city').city4;
				//先禁用后面几个下拉框
				form_c2.disabled = true;
				form_c3.disabled = true;
				form_c4.disabled = true;
				//把一级城市填充到第一个下拉框中.
				for(var i in citys){
					form_c1.append(new Option(i,i));
				}
				//当第一个下拉框内容变动时事件
				form_c1.onchange = function(){
					form_c2.options.length = 1;
					form_c3.options.length = 1;
					form_c4.options.length = 1;
					form_c2.disabled = false;
					form_c3.disabled = true;
					form_c4.disabled = true;
					//把对应的二级城市填充到第二个下拉框中.
					for(var i in citys[form_c1.value]){
						form_c2.append(new Option(i,i));
					}
				}
				//当第二个下拉框内容变动时事件
				form_c2.onchange = function(){
					form_c3.options.length = 1;
					form_c4.options.length = 1;
					form_c3.disabled = false;
					form_c4.disabled = true;
					//把对应的二级城市填充到第二个下拉框中.
					for(var i in citys[form_c1.value][form_c2.value]){
						form_c3.append(new Option(i,i));
					}
				}
				//当第三个下拉框内容变动时事件
				form_c3.onchange = function(){
					form_c4.options.length = 1;
					form_c4.disabled = false;
					//把对应的二级城市填充到第二个下拉框中.
					for(var i in citys[form_c1.value][form_c2.value][form_c3.value]){
						form_c4.append(new Option(citys[form_c1.value][form_c2.value][form_c3.value][i],citys[form_c1.value][form_c2.value][form_c3.value][i]));
					}
				}
				
				
			}
			
			
		</script>
	</head>
	<body>
		<form id="city" action="" method="">
			<select name="city1">
				<option value="">请选择</option>
			</select>
			<select name="city2">
				<option value="">请选择</option>
			</select>
			<select name="city3">
				<option value="">请选择</option>
			</select>
			<select name="city4">
				<option value="">请选择</option>
			</select>
		</form>
		
	</body>
</html>
